<template>
  <div class="mg-t-30">
    <checked-title
      :title="title"
      v-if="servers != 3"
    ></checked-title>
    <vue-seamless-scroll :data="datalist" class="seamless-warp" :class-option="classOption">
        <ul>
        <li
          :key="index"
          class="zxaj-card"
          v-for="(item, index) in datalist"
        >
          <p class="zxaj-card_header">
            <span
              :class="[asyncClassStyle(item.staFrom)]"
              class="tips"
              v-if="servers != 4"
            >{{ item.sourceTitle || item.typeTitle }}</span>
            <span
              class="tips4"
              v-if="servers == 4"
            >
              <span :class="'tipsspan' + item.beforCheck">
                {{
                item.beforCheck == 0
                ? '待审核'
                : item.beforCheck == 1
                ? '审核通过'
                : '审核驳回'
                }}
              </span>
              <span>{{ item.storeName }}</span>
            </span>
            <span
              :style="{ color: servers == 4 ? '#fff' : '' }"
              class="tips4-span"
              v-if="servers == 4"
            >{{ item.createTime }}</span>
            <span v-if="servers != 4">{{ item.staLink }}</span>
          </p>
          <div class="zxaj-card_content flex">
            <img
              :src="item.img"
              v-if="isImg && item.img && servers != 2"
            />
            <div>
              <div v-if="servers == 4">
                <p class="tools4">{{ item.detailAddress }}</p>
              </div>
              <p>{{ item.content }}</p>
              <div class="flex tools">
                <span v-if="servers != 4">{{ item.createTime }}</span>
                <span v-else></span>
                <button
                  @click="openDefault(item)"
                  v-if="servers != 3"
                >查看</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
   
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { BuJianMapDB } from '@/api'
import Bus from '@/untils/bus'
import { Card } from 'element-ui'
export default {
  components: {
    vueSeamlessScroll
  },
  data(){
     return {
        datalist:[]
   }
  },
  created(){
    if(this.title=='部件类案件列表'){
      this.getNewOrderList()
    }else{
      this.datalist=this.scrollData
    }
  },
  props: {
    // 滚动数据 FLY (CSS 3D)
    scrollData: {
      type: Array,
      required: true
    },
    servers: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 550
    },
    isImg: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
    },
    classOption: {
      type: Object,
      default: () => ({
        singleHeight: 140,
        direction: 1,
        limitMoveNum:0.1, 
      })
    }
  },

  computed: {

    asyncClassStyle() {
      // 数字城管-1  便民热线-2  其他-3
      return index => ['', 'tips-sz', 'tips-bm', 'tips-other'][index]
    }
  },
  methods: {
    getNewOrderList() {
      BuJianMapDB.getNewOrderList().then(res => {
        res.data.forEach(item => {
          let obj = {
            "staLink": item.staLink,
            "createTime": item.time,
            "orderNum": item.orderNum,
            "sourceTitle": item.sourceTitle,
            "title": item.title,
            "content": item.title,
          }
          if (item.sourceTitle == '数字城管') {
            obj.staFrom = 1
          }else if (item.sourceTitle == '便民热线') {
            obj.staFrom = 2
          } else {
            obj.staFrom = 3
          }
          this.scrollData.push(obj)
        
        });
       this.datalist=this.scrollData
        // sessionStorage.setItem('scrollDataAJ',JSON.stringify(this.scrollData)); 
      })
      
    },
    openDefault(obj) {
      if (this.servers === 4) {
        Bus.$emit('openDetailMen', obj)
      } else {
        let data = {
          id: obj.orderNum,
          img: obj.img
        }
        Bus.$emit('openDetail', data)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.seamless-warp{
  // background: #fff;
  height: 35rem;
  overflow: hidden;
}

  .zxaj-card {
    position: relative;
    margin-bottom: 1rem;
    > .zxaj-card_header {
      height: 4rem;
      background: rgba(31, 73, 135, 0.8);
      border: 1px solid #2368ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.4rem 0 1.8rem;

      span:nth-child(2) {
        color: #3cffff;
        font-size: 1.2rem;
      }
    }
    .tips {
      border-radius: 1rem 1rem 1rem 0px;
      width: 7rem;
      height: 2rem;
      color: #ffffff;
      font-size: 1.2rem;
      line-height: 2rem;
      text-align: center;
      &.tips-sz {
        background: #35cfe8;
      }
      &.tips-bm {
        background: #2c61ff;
      }
      &.tips-other {
        background: #b31ac6;
      }
    }
    .tips4 {
      display: flex;
      align-items: center;
      span:nth-child(1) {
        font-size: 1.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        padding: 0.3rem 0.4rem;
        // background: #FF009C;
        margin-right: 1.5rem;
      }
      span:nth-child(2) {
        font-size: 1.6rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
      .tipsspan0 {
        background: #ff009c;
      }
      .tipsspan1 {
        background: #00c000;
      }
      .tipsspan2 {
        background: #ccc;
      }
    }
    .zxaj-card_content {
      padding: 1.6rem;
      background-color: rgba(31, 73, 135, 0.25);
      display: flex;
      > img {
        display: block;
        width: 9rem;
        height: 7rem;
      }

      > div {
        margin-left: 1.6rem;
        flex: 1;

        > p {
          font-size: 1.4rem;
          color: #ffffff;
          line-height: 2.2em;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          white-space: pre-wrap;
          margin-bottom: 0.8rem;
        }
      }

      .tools {
        justify-content: space-between;

        span {
          font-size: 1.2rem;
          color: #9ed5ff;
        }

        button {
          cursor: pointer;
          width: 7rem;
          height: 2rem;
          background: rgba(31, 73, 135, 0.3);
          border: 1px solid #3cffff;
          border-radius: 1rem;
          color: #fff;
          background: url(../../components/ZuiXinAnJian/image/icon-anjian.png) no-repeat 85% 0.4rem;
          line-height: 2rem;
          text-indent: -0.5rem;
          font-size: 1.2rem;
        }
      }
      .tools4 {
        font-size: 1.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #11e0ff;
        line-height: 1.4rem;
      }
      .tools4-bottom {
        font-size: 1.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 2.2em;
        margin-top: 1rem;
      }
    }
  }

</style>

